<template>
    <div>
        <el-card class="box-card">
            <div class="header-box">
                <span class="title-name">资产来源 :</span>
                <el-input class="handle-input" clearable v-model="valueName" placeholder="请输入内容"></el-input>
            </div>
            <el-button type="primary" icon="el-icon-search" @click="seled">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="add">添加</el-button>
        </el-card>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="index" label="序号" width="60" align='center'>
                    <template slot-scope="scope">
                        {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="proSource" label="资产来源" align='center'></el-table-column>
                <el-table-column prop="sort" label="排序" align='center'></el-table-column>
                <el-table-column prop="updateTime" label="添加时间" align='center'></el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" class="mr10" @click="edit(scope.row)">编辑</el-link>
                        <el-link type="danger" class="mr10" @click="del(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <assetsource_add_edit ref="asset" :visible="visible" @close="visible = false" @refresh="proSourcelists">
        </assetsource_add_edit>
    </div>
</template>

<script>
import { proSourcelist, proSourcedel } from '../../../api/index'
import assetsource_add_edit from './components/assetsource_add_edit'
export default {
    data() {
        return {
            valueName: '',
            visible: false,
            query: {
                keyWord: '',
                pageNum: 1,
                pageSize: 10,
            },
            pageTotal: 0,
            tableData: [],
        };
    },
    components: {
        assetsource_add_edit
    },
    mounted() {
        this.proSourcelists()
    },
    methods: {
        add() {
            this.visible = true
            this.$refs.asset.open(
                {
                    proSource: '',
                    sort: 1
                }
            )
        },
        //编辑
        edit(row) {
            this.visible = true
            this.$refs.asset.open(row)
        },
        //删除
        del(id) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await proSourcedel(id)
                this.proSourcelists()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 重置
        reset() {
            this.query.keyWord = ''
            this.valueName = ''
            this.query.pageNum = 1
            this.proSourcelists()
        },
        //查询
        seled() {
            this.query.keyWord = this.valueName
            this.query.pageNum = 1
            this.proSourcelists()
        },
        handlePageChange(val) {
            this.query.pageNum = val;
            this.proSourcelists()

        },
        async proSourcelists() {
            const data = await proSourcelist(this.query)
            if (data.data.data.records.length == 0 && data.data.data.total > 0) {
                this.query.pageNum--
                this.proSourcelists()
                return
            }
            this.pageTotal = data.data.data.total
            this.tableData = data.data.data.records
        }
    }
};
</script>

<style scoped>
.header-box {
    display: inline-block;
}

.title-name {
    font-size: 14px;
    margin-right: 10px;
}

.handle-input {
    width: 220px;
    margin-right: 10px;
}

.table {
    width: 100%;
    font-size: 14px;
}
</style>
